<template>
  <div class="cart-goods">
    <van-row :align="'center'">
      <van-col span="2">
        <van-checkbox v-model="checked" @change="onChecked"></van-checkbox>
      </van-col>
      <van-col span="6">
        <van-image
         width="80"
         :src="props.cartGoods?.goods_thumb"
        />
      </van-col>
      <van-col span="16">
        <div class="cart-name">{{ props.cartGoods?.goods_name }}</div>
        <div class="cart-desc">{{ props.cartGoods?.goods_desc }}</div>
        <div class="price-stepper">
          <div class="cart-price">￥{{ props.cartGoods?.price }}</div>
          <div class="cart-stepper"><van-stepper /></div>
        </div>
      </van-col>
    </van-row>
    <van-divider />
  </div>
</template>

<script setup lang="ts">

  const props = defineProps({
    cartGoods: Object
  });
  let checked = ref();
  let onChecked = ()=>{
    if (props.cartGoods) {
      props.cartGoods.choose = checked.value;
    }
  }
</script>

<style scoped lang="less">
  .cart-goods{
    width: 95%;
    margin: 10px auto 0;
    .cart-name{
      font-size: 13px;
    }
    .cart-desc{
      font-size: 12px;
    }
    .price-stepper{
      display: flex;
      justify-content: space-between;
    }
  }
</style>